

<!-- 基础信息 -->
<template>
	<view>
		<view class="carc-view">
			<!-- <view class="userPhoto-Container list-cell b-b radiusT10" @click="selectImg"> -->
			<view class="row-between" @click="clk(0)">
				<text class="cell-text">头像</text>
				<view class="row-div">
					<image class="userPhoto" :src="form.img_url?imgSite+form.img_url : '/static/emptyCart.jpg'" mode=""></image>
					<uni-icons type="arrowright" style="font-size: 28upx;color: #999999;margin-left: 10upx;"></uni-icons>
				</view>
			</view>
			<view class="row-between">
				<text class="cell-text">昵称</text>
				<input class="cell-tip" type="text" v-model="form.name" placeholder-class="inputHolder" placeholder="请填写昵称" />
			</view>
			<view class="row-between" hover-class="cell-hover" :hover-stay-time="50">
				<text class="cell-text">性别</text>
				<view class="sex-Containere">
					<image class="sexIcon" :src="form.sex == '1' ? icon.select : icon.rDefaultBtn" mode="" @click="form.sex = '1'"></image>
					<view class="label">男</view>

					<image class="sexIcon" :src="form.sex == '2' ? icon.select : icon.rDefaultBtn" mode="" @click="form.sex = '2'"></image>
					<view class="label">女</view>
				</view>
			</view>
			
			<!-- <picker mode="multiSelector" @columnchange="bindMultiPickerColumnChange" :value="multiIndex" :range="multiArray">
				<view class="list-cell b-b" @click="getProvince('86')" hover-class="cell-hover" :hover-stay-time="50">
					<text class="cell-tit">城市</text>
					<text class="cell-tip" :class="{unSet: !addressMsg}">{{ addressMsg }}</text>
					<text class="cell-more yticon icon-you"></text>
				</view>
			</picker> -->
			
			<datePicker @onCancel="onCancel" @onConfirm="onConfirm" startDate="1900-01-01" endDate="2100-12-31" :defaultValue="form.birthday || defaultYmd">
				<view class="row-between" hover-class="cell-hover" :hover-stay-time="50">
					<text class="cell-text">生日</text>
					<view class="row-div">
						<text class="cell-tip" :class="{unSet: !form.birthday}">{{ form.birthday || '请选择' }}</text>
						<uni-icons type="arrowright" style="font-size: 28upx;color: #999999;"></uni-icons>
					</view>
				</view>
			</datePicker>
			
			<view class="row-between">
				<text class="cell-text">推荐人编码</text>
				<text class="cell-text" :style="{color: refereeId ? '#333333' : '#999999'}">{{refereeId || '无'}}</text>
				<!-- <input class="cell-tip" type="text" v-model="form.referenceCode" placeholder-class="inputHolder" placeholder="请填写推荐人编码" /> -->
			</view>
			
		</view>

		<!-- 保存 -->
		<view class="oneRow">
			<view class="list-cell save-btn" @click="save">保存</view>
		</view>
		
		
		<avatar @upload="doUpload" @avtinit="doBefore" quality="1" ref="avatar"></avatar>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	
	import datePicker from "@/components/gpp-datePicker/gpp-datePicker"
	import navHeader from '@/components/nav-header/nav-header';
	import avatar from "@/components/yq-avatar/yq-avatar";
	export default {
		components: {
			datePicker,
			navHeader,
			avatar
		},
		data() {
			return {
				icon: {
					select: '/static/assets/select.png',
					backBtn: '/static/images/common/return.png',
					rDefaultBtn: '/static/images/user/baseInfo/r_default.png',
					rSelectBtn: '/static/images/user/baseInfo/r_select.png'
				},
				form: {
					img_url: '',
					name: '',
					sex: '1',
					birthday: null,
					province: '',
					provinceCode: '',
					city: '',
					cityCode: '',
					recommender: ''
				},
				provinceCode: '',
				cityCode: '',
				districtCode: '',
				address: [
					[],
					[]
				],
				multiArray: [
					[],
					[]
				],
				multiIndex: [0, 0],
				addressMsg: '请选择城市',
				a: '',
				refereeId: '',
				
				defaultYmd: null
			};
		},
		computed: {
			...mapState(['imgSite', 'apiSite', 'userInfo'])
		},
		onLoad(options) {
			
			let data = JSON.parse(options.data);
			data.headSculpture ? this.form.img_url = data.headSculpture : '';
			data.nickName ? this.form.name = data.nickName : '';
			data.sex ? this.form.sex = data.sex : '';
			data.birthday ? this.form.birthday = data.birthday : null;
			data.provinceCode ? this.form.provinceCode = data.provinceCode : '';
			data.cityCode ? this.form.cityCode = data.cityCode : '';
			this.refereeId = data.refereeId || ''
			// this.getProvince('86');
			
			
			// 默认年月日
			var date = new Date();
			var YY = date.getFullYear() + ('-');
			var MM = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + ('-');
			var DD = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
			
			this.defaultYmd = YY + MM + DD;
		},
		methods: {
			
			onCancel(e){
				console.log(e);
			},
			onConfirm(e){
				this.form.birthday = e.dateValue;
			},
			
			
			// 选择头像
			selectImg() {
				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: chooseImageRes => {
						let tempFilePaths = chooseImageRes.tempFilePaths;
						// #ifdef APP-PLUS
						uni.uploadFile({
							url: that.apiSite + '/u_avt',
							filePath: tempFilePaths[0],
							name: 'file',
							success: (uploadFileRes) => {
								that.form.img_url = JSON.parse(uploadFileRes.data).response[0];
							},
							fail: (res) => {
								console.log(res);
							}
						});
						// #endif
						// #ifndef APP-PLUS
						console.log(tempFilePaths[0]);
						that.$api.globalUtil.imgAjax({
							url: '/u_avt',
							method: 'POST',
							filePath: tempFilePaths[0],
							name: 'file',
							data: {},
							success: function(res2) {
								that.form.img_url = res2.response[0];
							}
						});
						// #endif
					}
				});
			},
			birthdayChange(e) {
				// console.log(e.detail.value);
				this.form.birthday = e.detail.value;
			},
			// 获得省份
			getProvince(id) {
				// console.log(this.form);
				let that = this;
				this.$api.globalUtil.requestAjax({
					url: '/AreaApi/listForApi',
					method: 'POST',
					data: {
						grade: 1,
						parentId: id
					},
					success: function(res) {
						for (let i of res.data.response) {
							that.address[0].push(i);
							that.multiArray[0].push(i.text);
						}
						if (that.form.provinceCode) {
							for (let j in that.address[0]) {
								if (that.form.provinceCode == that.address[0][j].value) {
									that.multiIndex[0] = j;
									that.getCity(that.address[0][j].value);
									console.log(j);
									break;
								}
							}
						} else {
							that.getCity(that.address[0][0].value);
						}
						// console.log(that.address[0])
					}
				});
			},
			// 获得城市列表
			getCity(id) {
				// console.log(id);
				let that = this;
				this.$api.globalUtil.requestAjax({
					url: '/AreaApi/listForApi',
					method: 'POST',
					data: {
						grade: 2,
						parentId: id
					},
					success: function(res) {
						let address = [];
						let multiArray = [];
						for (let i of res.data.response) {
							address.push(i);
							multiArray.push(i.text);
						}
						if (that.form.cityCode) {
							for (let j in address) {
								if (that.form.cityCode == address[j].value) {
									that.multiIndex[1] = j;
									break;
								}
							}
						}
						// that.address[1] = address;
						// that.multiArray[1] = multiArray;

						that.giveData(1, address, multiArray);
					}
				});
			},

			// 三级联动
			bindMultiPickerColumnChange(e) {
				this.multiIndex[e.detail.column] = e.detail.value;
				if (e.detail.column - 0 === 0) {
					this.getCity(this.address[0][e.detail.value].value);
					this.multiIndex[1] = 0;
				} else if (e.detail.column - 0 === 1) {
					let a = this.address[0][this.multiIndex[0]].text;
					let b = this.address[1][this.multiIndex[1]].text;
					this.addressMsg = a + b;
				}
			},
			// 赋值
			giveData(index, address, multiArray) {
				this.address[index] = address;
				this.multiArray[index] = multiArray;
				if (index === 1) {
					let a = this.address[0][this.multiIndex[0]].text;
					let b = this.address[1][this.multiIndex[1]].text;
					this.addressMsg = a + b;
				}
				// index === 2?this.addressMsg = this.address[0][0].text + address[1][0].text + address[2][0].text:'';
			},
			save() {
				if(!this.form.img_url)return this.$api.msg('请上传头像');
				if(!this.form.name)return this.$api.msg('请输入昵称');
				if(!this.form.birthday)return this.$api.msg('请选择生日');
				var that = this; 
				this.$api.globalUtil.requestAjax({
					url: '/CustomerApi/updateCustomerForApi',
					method: 'POST',
					data: {
						headSculpture: this.form.img_url,
						nickName: this.form.name,
						// province: this.address[0][this.multiIndex[0]].text,
						// provinceCode: this.address[0][this.multiIndex[0]].value,
						// city: this.address[1][this.multiIndex[1]].text,
						// cityCode: this.address[1][this.multiIndex[1]].value,
						sex: this.form.sex,
						birthday: this.form.birthday
					},
					success: function(res) {
						
						if (res.data.response.perfectInformationFlag) {
							uni.setStorage({
								key: "tips",
								data: res.data.response
							})
						}
						
						that.$api.msg('保存成功!');
						
						setTimeout(function() {
							uni.navigateBack({
								detail: '1'
							});
						}, 1500);
					}
				});
			},
			
			
			//剪裁头像
			doBefore() {
				console.log('doBefore');
			},
			clk(index) {
				this.$refs.avatar.fChooseImg(index,{
					selWidth: '350upx', selHeight: '350upx', 
					expWidth: '260upx', expHeight: '260upx',
					inner: index ? 'true' : 'false'
				});
			},
			doUpload(rsp) {
				
				var that = this;
				// #ifdef APP-PLUS
				uni.uploadFile({
					url: that.apiSite + '/u_avt',
					filePath: rsp.path,
					name: 'file',
					success: (uploadFileRes) => {
						that.form.img_url = JSON.parse(uploadFileRes.data).response[0];
					},
					fail: (res) => {
						console.log(res);
					}
				});
				// #endif
				// #ifndef APP-PLUS
				console.log(rsp.imgName);
				that.$api.globalUtil.imgAjax({
					url: '/u_avt',
					method: 'POST',
					filePath: rsp.path,
					name: 'file',
					data: {},
					success: function(res2) {
						that.form.img_url = res2.response[0];
					}
				});
				// #endif
			}
		}
	};
</script>

<style lang="scss">
	page {
		background: #f5f5f5;
	}
.carc-view {
		width: 690upx;
		margin: 20upx auto;
		background: #FFFFFF;
		border-radius: 10upx;
		margin-bottom: 140upx;
		padding: 0 45upx;

		.row-between {
			width: 100%;
			padding: 40upx 0;
			border-bottom: 1px solid #EEEEEE;

			&:last-child {
				border: none;
			}
			.userPhoto {
				width: 86rpx;
				height: 86rpx;
				border-radius: 50%;
			}

			.cell-text {
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}

			.cell-tip {
				text-align: right;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
			}

			.inputHolder {
				text-align: right;
				font-size: 28upx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}

			.unSet {
				color: #999999;
			}
		}
	}
	// header部分
	.header-Container {
		position: relative;
		width: 100%;
		height: 176rpx;
		overflow: hidden;
		box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
		background: rgba(255, 255, 255, 1);

		.leftBtns {
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;

			.back {
				margin-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}
		}

		.title {
			position: absolute;
			bottom: 0;
			width: 100%;
			height: 86rpx;
			line-height: 86rpx;
			text-align: center;
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: rgba(51, 51, 51, 1);
		}
	}

	.container {
		.oneRow {
			margin-top: 20rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;

			.radiusT10 {
				border-radius: 10rpx 10rpx 0 0;
			}

			.radiusB10 {
				border-radius: 0 0 10rpx 10rpx;
			}
		}
	}

	.list-cell {
		display: flex;
		align-items:center;
		padding: 0 30rpx 0 45rpx;
		height: 106rpx;
		line-height: 106rpx;
		position: relative;
		background: #fff;
		justify-content: center;

		input {
			text-align: right;
			color: #333333;
		}

		.inputHolder {
			font-size: 28rpx;
			font-family: PingFang;
			// font-weight:500;
			color: rgba(153, 153, 153, 1);
			// line-height: 106rpx;
		}

		&.save-btn {
			margin: 0 auto;
			margin-top: 140rpx;
			width: 600rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #FE5E49;
			border-radius: 45rpx;
			text-align: center;
			font-size: 34rpx;
			font-family: PingFang;
			// font-weight:500;
			color: rgba(255, 255, 255, 1);
		}

		&.cell-hover {
			background: #fafafa;
		}

		&.b-b:after {
			left: 30rpx;
			right: 30rpx;
		}

		&.m-t {
			margin-top: 16upx;
		}

		.cell-more {
			align-self: baseline;
			font-size: $font-lg;
			color: $font-color-light;
			margin-left: 10upx;
		}

		.cell-tit {
			flex: 1;
			margin-right: 10upx;
			font-size: 28rpx;
			font-family: PingFang;
			color: #666666;
		}

		.cell-tip {
			font-size: 28rpx;
			font-family: PingFang;
			/* font-weight:500; */
			color: #333333;
			line-height: 55rpx;

			&.unBind {
				color: #d21728;
			}

			&.unSet {
				color: #999999;
			}
		}
	}

	//用户头像
	.userPhoto-Container {
		display: flex;
		align-items: center;
		height: 150rpx;
		line-height: 150rpx;

		.userPhoto {
			width: 86rpx;
			height: 86rpx;
			border-radius: 50%;
		}
	}

	//性别
	.sex-Containere {
		display: flex;
		align-items: center;

		.sexIcon {
			margin-left: 70rpx;
			width: 30rpx;
			height: 30rpx;
		}

		.label {
			margin-left: 25rpx;
			font-size: 28rpx;
			font-family: PingFang;
			// font-weight:500;
			color: rgba(51, 51, 51, 1);
		}
	}
</style>
